<template>
  <div id="app">
     <v-row class="row" type="flex" justify="start">
      <v-col :span="2">justify start</v-col>
      <v-col :span="2">justify start</v-col>
      <v-col :span="2">justify start</v-col>
    </v-row>
    <v-row class="row" type="flex" justify="end">
      <v-col :span="2">justify end</v-col>
      <v-col :span="2">justify end</v-col>
      <v-col :span="2">justify end</v-col>
    </v-row>
    <v-row class="row" type="flex" justify="center">
      <v-col :span="2">justify center</v-col>
      <v-col :span="2">justify center</v-col>
      <v-col :span="2">justify center</v-col>
    </v-row>
    <v-row class="row" type="flex" justify="space-around">
      <v-col :span="2">justify space-around</v-col>
      <v-col :span="2">justify space-around</v-col>
      <v-col :span="2">justify space-around</v-col>
    </v-row>
    <v-row class="row" type="flex" justify="space-between">
      <v-col :span="2">justify space-between</v-col>
      <v-col :span="2">justify space-between</v-col>
      <v-col :span="2">justify space-between</v-col>
    </v-row>

    <v-row class="row">
      <v-col :span="6">col-6</v-col>
      <v-col :span="6">col-6</v-col>
      <v-col :span="6">col-6</v-col>
      <v-col :span="6">col-6</v-col>
      <v-col :span="6">col-6</v-col>
    </v-row>

    <v-row class="row" type="flex">
      <v-col :span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="12">col-4</v-col>
    </v-row>
    <v-row class="row"  type="flex">
       <v-col
        :span="4"
        :xs="{
        span:'24',
        offset:'2'
      }"
        :sm="{
        span:'12',
        offset:'2'
      }"
        :md="{
        span:'8',
        offset:'2'
      }"
        :lg="{
        span:'6',
        offset:'2'
      }"
        :xl="{
        span:'12',
        offset:'2'
      }"
      >col-4</v-col>
    </v-row>



    <div class="row d-flex">

      <div>flex</div>
       <div>flex</div>
        <div>flex</div>
    </div>
    <!-- <v-row class="row" type="flex">
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
    </v-row>
    <v-row class="row" type="flex">
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
    </v-row>
    <v-row class="row" type="flex">
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
      <v-col :span="4">col-4</v-col>
    </v-row>-->
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    save() {
      console.log("save");
    }
  }
};
</script>

<style lang="scss">

.d-flex{
  display: flex;
  justify-content: space-between;
}
.row {
  background: cadetblue;
  margin-bottom: 10px;
  div {
    border: solid 1px red;
  }
}
</style>
